<template>
    <div class="about-page">
        <header>
            <h1>关于本站</h1>
        </header>
        <main>
            <section class="introduction">
                <p>本站是是一个展示抖音直播数据的可视化分析平台，通过数据分析，帮助用户更好的了解抖音直播数据。</p>
            </section>

            <section class="tech-support">
                <h2>本站的技术支持：</h2>
                <ul>
                    <li>前端使用Vue.js框架开发，使用Element UI组件库进行页面布局。</li>
                    <li>后端使用Python Fastapi框架开发。</li>
                    <li>分析数据使用Spark进行离线分析。</li>
                    <li>原始数据来源于抖音直播网页版，截止2024.12.22已有数据920208条。</li>
                    <li>数据存储使用SQLite数据库。</li>
                </ul>
            </section>

            <section class="team">
                <h2>本站参与人员</h2>
                <p><strong>项目核心开发者：</strong>余林峰</p>
                <p><strong>其他成员：</strong>李彦森，焦子明，李少壮，周家华</p>
            </section>
        </main>
        <footer>
            <p>&copy; 2024</p>
        </footer>
    </div>
</template>

<style scoped>
/* 全局样式 */
.about-page {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* 标题样式 */
h1,
h2 {
    color: #2c3e50;
}

h1 {
    font-size: 2.5em;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

h2 {
    font-size: 1.8em;
    margin-top: 30px;
}

/* 段落样式 */
p {
    margin-bottom: 15px;
}

/* 列表样式 */
ul {
    padding-left: 20px;
}

li {
    margin-bottom: 10px;
}

/* 部分样式 */
.introduction {
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 30px;
}

.tech-support,
.team {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

/* 页脚样式 */
footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 0.9em;
    color: #777;
}
</style>